<template>
  <section class="h100 keFu-panel">
    <van-row class="header-panel">
      客服中心
    </van-row>
    <van-row class="panel-content">
      <van-row class="top-panel">
        <van-row class="title">猜你想问</van-row>
        <van-row class="list">
          <div class="item" v-for="(item,index) in faqList" :key="index" @click="toFAQDetail(item.id)">
            {{ item.title }}
          </div>
        </van-row>
        <div class="btns" @click="getKFData(1)">
          <!--          <img src="../../assets/images/icon/replay.png" @click="serviceDialog=true" /> 换一批-->
          <img src="../../assets/images/icon/replay.png"/> 换一批
        </div>
      </van-row>

      <van-row class="service-panel" v-if="this.kfBusiness=='1'">
        <div class="item" v-for="(item,index) in kfList" :key="index">
          <van-row class="code" @click="showKFIcon(entityUrl+'/'+item.picture)">
            <img :src="entityUrl+'/'+item.picture" @click="serviceDialog=true"/>
          </van-row>
          <van-row class="content">
            <p class="name">{{ item.title }}</p>
            <p class="tips">{{ item.desc }}</p>
          </van-row>
          <div class="icon" @click="copyKFText(item.content)">
            复制
            <!--            <img :src="item.icon"/>-->
          </div>
        </div>
      </van-row>
      <div class="form-btns" v-if="this.kfBusiness!='1'" @click="onLineKeFu()">人工客服</div>
      <van-row class="top-panel" style="width: 100%;padding: 2% 5%;margin-top: 5%">
        <van-row class="title">联系客服：</van-row>
        <img style="width: 100%;border-radius: 15px;" src="https://file.dandanyx.cn/main/image/20240422/6625f57c81654.jpg"/>
        <div class="item">
         <p>1.截图保持二维码</p>
         <p>2.通过微信扫一扫识别二维码添加（添加请备注蛋蛋游戏）</p>
        </div>
      </van-row>
      <van-row class="form-tips" style="margin-top: 5%">服务时间：10:00-21:00</van-row>
    </van-row>

    <!-- 人工客服 -->
    <van-dialog v-model="serviceDialog" :showConfirmButton="false" :closeOnClickOverlay="true">
      <van-row class="service-dialog">
        <img :src="checkKFIcon"/>
        <!--        <p>长按二维码识别</p>-->
      </van-row>
    </van-dialog>
  </section>
</template>

<script>
import {BRStorage} from "../../utils/brStorage";
import {BRNative} from "../../utils/brNative";

export default {
  data() {
    return {
      onlyFAQ: 0,
      entityUrl: "",
      gameName: "",
      kfBusiness: '1',
      faqList: null,
      userInfo: null,
      kfList: null,

      checkKFIcon: "",
      serviceDialog: false,
      qiMoClientId: new Date().getTime(),//七陌
    }
  },
  created() {
    this.getLoad();
  },
  methods: {
//初始化加载
    getLoad() {
      let queryData = this.$route.query;
      let userToken = queryData.userToken;
      let fromNative = queryData.native;
      let gameId = queryData.gameId;
      let channelCode = queryData.channelCode;
      let runRomSystem = queryData.runRomSystem;
      if (this.BRIsSetString(fromNative)) {
        BRStorage.setStorage(BRStorage.KeyUserToken(), userToken);
        BRStorage.setStorage(BRStorage.KeyGameID(), gameId);
        BRStorage.setStorage(BRStorage.KeyChannelCode(), channelCode);
        BRStorage.setStorage(BRStorage.KeyRunRomSystem(), runRomSystem);
      }
      this.getKFData(0);
    },

    //获取客服信息
    getKFData(onlyFAQ) {
      this.onlyFAQ = onlyFAQ;
      let params = {
        onlyFAQ: this.onlyFAQ,
      }
      this.$http(window.config.webHomeApiV2 + '/mb/kf/home', params).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRToast(res.msg);
          return;
        }
        let resKFData = res.data;
        this.faqList = resKFData['faqList'];
        if (this.onlyFAQ !== 1) {
          this.entityUrl = resKFData['entityUrl'];
          this.gameName = resKFData['gameName'];
          this.kfBusiness = resKFData['kfBusiness'];
          this.userInfo = resKFData['userInfo'];
          this.kfList = resKFData['kfList'];
          if (this.kfBusiness == "2") {
            let qiMoJS = resKFData['qiMoJS'];
            this.creatQiMoJSData(qiMoJS);
          }
        }
      });
    },

    //FAQ详情
    toFAQDetail(faqId) {
      // this.$router.push("/KeFu/faqDetails");
      this.$router.push({
        path: "/KeFu/faqDetails",
        query: {
          faqId: faqId,
        },
      });
    },

    //创建七陌客服内容
    showKFIcon(checkKFIcon) {
      this.checkKFIcon = checkKFIcon;
      this.serviceDialog = true;
    },

    //创建七陌客服内容
    copyKFText(kfContext) {
      BRNative.copyText(kfContext);
    },

    //人工在线客服
    onLineKeFu() {
      this.qiMoClientId = {
        userId: this.userInfo.account,
        customField: {
          "游戏名称": this.gameName,
          "用户account": this.userInfo.account,
          "用户电话": this.userInfo.phone,
          "实名认证": this.userInfo.identify,
        }
      };
      qimoChatClick();
    },

    //创建七陌客服内容
    creatQiMoJSData(qiMoJSUrl) {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = qiMoJSUrl;
      document.body.appendChild(script);
    },
  }
};
</script>

<style lang='less'>
@import "../../assets/css/keFu/index.less";
</style>
